import { ActionType, ProTable } from '@ant-design/pro-components'
import React, { useEffect, useRef, useState } from 'react'
import axios from 'axios';


const columns: any = [
  {
    title: '锁ID',
    dataIndex: 'suoID',
    key: 'suoID',
    search: false,
    align: "center"
  },
  {
    title: '控制器ID',
    dataIndex: 'KongID',
    key: 'KongID',
    search: false,
    align: "center"
  },
  {
    title: '房名',
    dataIndex: 'room',
    key: 'room',
    align: "center",
    search: false,
  },
  {
    title: '房号',
    dataIndex: 'hao',
    key: 'hao',
    align: "center"
  },
  ,
  {
    title: '楼栋',
    dataIndex: 'lou',
    key: 'lou',
    align: "center",
    search: false,
  },
  {
    title: '楼层',
    dataIndex: 'ceng',
    key: 'ceng',
    align: "center",
    search: false,
  },
  {
    title: '电压',
    dataIndex: 'ya',
    key: 'ya',
    align: "center",
    search: false,
  },
  {
    title: '在线状态',
    dataIndex: 'zai',
    key: 'zai',
    align: "center",
    valueType: 'select',
    valueEnum: {
      open: {
        text: '已在线',
        status: 'Error',
      },
      processing: {
        text: '不在线',
        status: 'Processing',
      },
    },
  },
  {
    title: '在线时间',
    dataIndex: 'time',
    key: 'time',
    align: "center",
    search: false,
  },
];
const index: React.FC = () => {

  const [Roomlist, setRoomlist] = useState<any[]>([])

  useEffect(() => {
    axios.get('/api/getmen')
      .then(({ data }) => {
        const list = data.list.map((item: any, index: any) => ({
          ...item,
          key: String(index),
        }));
        setRoomlist(list);
      });
  }, [])

  const actionRef = useRef<ActionType>();

  return (
    <>

      <ProTable<any>
        columns={columns}
        actionRef={actionRef}
        cardBordered
        dataSource={Roomlist}
        editable={{
          type: 'multiple',
        }}
        defaultSize={'large'}
        columnsState={{
          persistenceKey: 'useRoom_log',
          persistenceType: 'localStorage',

        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 10,
          onChange: (page) => console.log(page),
        }}
        dateFormatter="string"
      // headerTitle="高级表格"

      />
    </>
  )
}

export default index
